
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>首页</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<script src="../../js/vue.js"></script>
	<script type="text/javascript" src="../../js/jquery-2.1.4.js"></script>
	<script src="../../layuiadmin/layui/layui.js"></script>
	<script type="text/javascript" src="../../js/echarts.min.js" ></script>
	<link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css"  media="all">
	<link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
 <style>
 	*{
 		padding: 0;
 		margin: 0;
 	}
 	#content{
 		width: 100%;
 		height: 270px;
 		
 	}
	#bottom{
		width: 100%;
		height: 1000px;
		background-color: white;
	}
 	.box{
 		margin-left: 60px;
 		margin-top: 70px;
 		width:260px;
 		height: 110px;
 		float: left;
 		background-color: white;
 		position: relative;
 	}
 	#userBox{
 		width: 80px;
 		height: 80px;
 		border-radius: 5px;
 		margin-top: 15px;
 		margin-left: 15px;
 		text-align: center;
 		line-height: 80px;
 		
 	}
 	#userBox:hover{
 		background-color: rgb(64,201,198);
 	}
 	#user{
 		font-size: 35px;
 		color: rgb(64,201,198);
 	}
 	#proBox{
 		width: 80px;
 		height: 80px;
 		border-radius: 5px;
 		margin-top: 15px;
 		margin-left: 15px;
 		text-align: center;
 		line-height: 80px;
 	}
 	#proBox:hover{
 		background-color: rgb(54,163,247);
 	}
 	#pro{
 		font-size: 40px;
 		color: rgb(54,163,247);
 	}
 	#storeBox{
 		width: 80px;
 		height: 80px;
 		border-radius: 5px;
 		margin-top: 15px;
 		margin-left: 15px;
 		text-align: center;
 		line-height: 80px;
 	}
 	#storeBox:hover{
 		background-color: rgb(244,81,108 );
 	}
 	#store{
 		font-size: 40px;
 		color: rgb(244,81,108 );
 	}
 	#orderBox{
 		width: 80px;
 		height: 80px;
 		border-radius: 5px;
 		margin-top: 15px;
 		margin-left: 15px;
 		text-align: center;
 		line-height: 80px;
 	}
 	#orderBox:hover{
 		background-color: rgb(52,191,163 );
 	}
 	#order{
 		font-size: 40px;
 		color: rgb(52,191,163 );
 	}
 	.box .rightBox{
 		width: 80px;
 		height: 80px;
 		top: 22px;
 		right: 15px;

 		position: absolute;
 		font-size: 16px;
 	}
 	
 </style>
</head>
<body>
	<div id="content">
		<div class="box">
			<a lay-href="/houtai/page/user/list/list.html">
				<div id="userBox">
			 		<i class="layui-icon" id="user">&#xe770;</i>
				</div>
			</a>
			<div class="rightBox">
				<span>用户数量</span><br /><br />
				<span id="userCount"></span>
			</div>
		</div>
		<div class="box">
			<a lay-href="/houtai/page/products/product/list.html">
				<div id="proBox">
					<i class="layui-icon" id="pro">&#xe657;</i>
				</div>
			</a>
			<div class="rightBox">
				<span>商品数量</span><br /><br />
				<span id="proCount"></span>
			</div>
		</div>
		<div class="box">
			<a lay-href="/houtai/page/deploy/shopdeploy.html">
				<div id="storeBox">
					<i class="layui-icon" id="store">&#xe715;</i>
				</div>
			</a>
			<div class="rightBox">
				<span>门店数量</span><br /><br />
				<span id="busiCount"></span>
			</div>
		</div>
		<div class="box">
			<a lay-href="/houtai/page/order/list.html">
				<div id="orderBox">
					<i class="layui-icon" id="order">&#xe65e;</i>
				</div>
			</a>
			<div class="rightBox">
				<span>订单数量</span><br /><br />
				<span id="orderCount"></span>
			</div>
		</div>
		
	</div>
	<div id="bottom">
		<!---------------------------------------------条件搜索框------------------------------------------->
        <br>
		<div class="demoTable" >
			<form id="serachForm" class="layui-form" >

				<div class="layui-inline">
					<label class="layui-form-label">起止日期:</label>
					<div class="layui-input-inline" style="width: 100px">
						<input type="text" name="startDate" id="startDate" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
					</div>
					-
					<div class="layui-input-inline" style="width: 100px">
						<input type="text" name="endDate" id="endDate" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-inline" style="margin-left: 10px">
					<!--这个地方的不能直接使用button标签，使用button标签会重复提交数据-->
					<input type="button" class="layui-btn" data-type="reload" value="搜索">
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>

			</form>
		</div>
		<div id="main2" style="width: 1000px;height:400px;"></div>
		<div id="main" style="width: 1000px;height:400px;"></div>

	</div>

  


  <script>
	  // 基于准备好的dom，初始化echarts实例
	  var chartZhu  = echarts.init(document.getElementById('main'));
	  var chartZhe  = echarts.init(document.getElementById('main2'));
	  // 指定图表的配置项和数据
	  //指定图表配置项和数据
      var names=[];    //类别数组（实际用来盛放X轴坐标值）
      var nums=[];    //销量数组（实际用来盛放Y坐标值）
      var dates=[];    //类别数组（实际用来盛放X轴坐标值）
      var numbers=[];    //销量数组（实际用来盛放Y坐标值）
    var selectOrder = function(){
        names=[];
        nums=[];
        $.ajax({
            type : "post",
            async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url : "/houtai/page/selectIndexOrderCount",
            data : $("#serachForm").serialize(),
            dataType : "json",        //返回数据形式为json
            success : function(res) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                if (res.message=="success") {
                    var result = res.li;
                    for(var i=0;i<result.length;i++){
                        names.push(result[i].name);    //挨个取出类别并填入类别数组
                    }
                    for(var i=0;i<result.length;i++){
                        nums.push(result[i].num);    //挨个取出销量并填入销量数组
                    }
                    chartZhu.hideLoading();    //隐藏加载动画
                    chartZhu.setOption({
                        title: {
                            text: '每日订单数量'
                        },
                        tooltip: {},
                        legend: {
                            data: ['数量']
                        },
                        xAxis: {
                            data: names
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            name: '数量',
                            type: 'bar', //柱状
                            data: nums,
                            itemStyle: {
                                normal: { //柱子颜色
                                    color: '#B0E2FF'
                                }
                            },
                            barWidth: 20// 柱形的宽度

                        }]//加载数据图表
                    },true);

                }

            },
            error : function(errorMsg) {
                //请求失败时执行该函数
                layer.msg("图表请求数据失败!");
                chartZhu.hideLoading();
            }
        });
    }
      var selectUser = function(){
          dates=[];
          numbers=[];
          $.ajax({
              type : "post",
              async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
              url : "/houtai/page/selectIndexUserCount",
              data : $("#serachForm").serialize(),
              dataType : "json",        //返回数据形式为json
              success : function(res) {
                  //请求成功时执行该函数内容，result即为服务器返回的json对象
                  if (res.message=="success") {
                      var result = res.li;
                      for(var i=0;i<result.length;i++){
                          dates.push(result[i].name);    //挨个取出类别并填入类别数组
                      }
                      for(var i=0;i<result.length;i++){
                          numbers.push(result[i].num);    //挨个取出销量并填入销量数组
                      }
                      chartZhe.hideLoading();    //隐藏加载动画
                      chartZhe.setOption({
                          title: {
                              text: '用户数量曲线'
                          },
                          tooltip: {},
                          legend: { //顶部显示 与series中的数据类型的name一致
                              data: ['数量']
                          },
                          xAxis: {
                              data: dates
                          },
                          yAxis: {
                              type: 'value'
                          },
                          series: [{
                              name: '数量',
                              type: 'line', //
                              data: numbers
                          }]//加载数据图表
                      },true);
                  }
              },
              error : function(errorMsg) {
                  //请求失败时执行该函数
                  layer.msg("图表请求数据失败!");
                  chartZhu.hideLoading();
              }
          });
      }
      selectOrder();
      selectUser();

	  //
	  // var optionchartBing = {
		//   title: {
		// 	  text: '商品订单',
		// 	  subtext: '纯属虚构', //副标题
		// 	  x: 'center' //标题居中
		//   },
		//   tooltip: {
		// 	  // trigger: 'item' //悬浮显示对比
		//   },
		//   legend: {
		// 	  orient: 'vertical', //类型垂直,默认水平
		// 	  left: 'left', //类型区分在左 默认居中
		// 	  data: ['单价', '总价', '销量', '产量']
		//   },
		//   series: [{
		// 	  type: 'pie', //饼状
		// 	  radius: '60%', //圆的大小
		// 	  center: ['50%', '50%'], //居中
		// 	  data: [{
		// 		  value: 335,
		// 		  name: '单价'
		// 	  },
		// 		  {
		// 			  value: 310,
		// 			  name: '总价'
		// 		  },
		// 		  {
		// 			  value: 234,
		// 			  name: '销量'
		// 		  },
		// 		  {
		// 			  value: 135,
		// 			  name: '产量'
		// 		  }
		// 	  ]
		//   }]
	  // };
	  chartZhu.showLoading();
	  chartZhe.showLoading();

	  layui.config({
		  base: '../../layuiadmin/' //静态资源所在路径
	  }).extend({
		  index: 'lib/index' //主入口模块
	  }).use(['index','form','laydate'], function(){
		  var $ = layui.jquery;
		  var laydate = layui.laydate;
		  var form = layui.form;
		  //加载日期选择插件
		  laydate.render({
			  elem: '#startDate'
		  });
		  laydate.render({
			  elem: '#endDate'
		  });
		  //刷新表单
		  form.render();
		  //监听搜索框提交按钮
		  $('.demoTable .layui-btn').on('click', function(){
              selectOrder();
              selectUser();
		  });
	  });

  $(function(){
	  var userBox = $("#userBox");
	  var proBox = $("#proBox");
	  var storeBox = $("#storeBox");
	  var orderBox = $("#orderBox");
	  userBox.mouseover(function(){
		  $("#user").css("color","white");
	  });
	  userBox.mouseleave(function(){
		  $("#user").css("color","rgb(64,201,198)");
	  });
	  proBox.mouseover(function(){
		  $("#pro").css("color","white");
	  });
	  proBox.mouseleave(function(){
		  $("#pro").css("color","rgb(54,163,247)");
	  });
	  storeBox.mouseover(function(){
		  $("#store").css("color","white");
	  });
	  storeBox.mouseleave(function(){
		  $("#store").css("color","rgb(244,81,108 )");
	  });
	  orderBox.mouseover(function(){
		  $("#order").css("color","white");
	  });
	  orderBox.mouseleave(function(){
		  $("#order").css("color","rgb(52,191,163 )");
	  });
	  		$.ajax({
                 url:"/houtai/page/selectUserCount",
                 dataType:"json",
                 type:"get",
                 success:function (data) {
                     $("#userCount").text(data.obj);
                 }
             })
		  $.ajax({
			  url:"/houtai/page/selectProCount",
			  dataType:"json",
			  type:"get",
			  success:function (data) {
				  $("#proCount").text(data.obj);
			  }
		  })
		  $.ajax({
			  url:"/houtai/page/selectBusiCount",
			  dataType:"json",
			  type:"get",
			  success:function (data) {
				  $("#busiCount").text(data.obj);
			  }
		  })
		  $.ajax({
			  url:"/houtai/page/selectOrderCount",
			  dataType:"json",
			  type:"get",
			  success:function (data) {
				  $("#orderCount").text(data.obj);
			  }
		  })
  });

  </script>
</body>
</html>


